<template>
  <div>
    <van-sticky>
      <van-nav-bar title="分享" left-arrow @click-left="back" />
    </van-sticky>

    <div class="content" id="pic" style="position: relative;" ref="addImage">
      <div v-if="!dataURL">
        <div id="imgbox">
          <img v-if='detail.titleImgUri' class="img" :src="detail.titleImgUri" alt="">
        </div>
        <div id="text">

          <p class="goodName">{{detail.packageName}}</p>
          <!-- <p class="goodName" v-html="">{{}}</p> -->
          <p class="money">{{money}}</p>
          <img :src="ewm" class="ewm" alt="">
          <img src="../../assets/img/max.jpg" style="width: 1.5rem; height: 1.5rem; position: absolute;bottom: 1rem; left: 2.3rem;" alt="">
          <img class="tximg" :src="my.avatarFile.uriPath" alt="">
          <span class="name">{{my.nickName}}</span>
			<span class="wxgzh">关注微信公众号：巨服宝官方服务平台</span>

        </div>
      </div>
      <!-- <div v-if="dataURL" style="width: 80vw;height: 40vh;"> -->
      <img style="width: 100%; height: 100%; z-index: 999; position: relative;" v-if="dataURL" :src="dataURL" alt="">
      <!-- </div> -->
    </div>
    <p class="tips" v-if="dataURL">提示:长按图片保存到本地相册</p>
    <p @click="clickGeneratePicture" v-if="!dataURL" class="button">生成海报</p>
  </div>
</template>

<script>
import api from "../../api/api.js"
import html2canvas from 'html2canvas'
import QRCode from 'qrcode'
export default {
  data () {
    return {
      dataURL: '',
      firstFlag: true,
      detail: {},
      my: {
        nickName: '',
        avatarFile: {
          uriPath: ''
        }
      },
      ewm: '',
      ShareCode: '',
      money: ''
    }
  },
  created () {
    this.getData()
    this.money = this.$route.params.money
    this.getMe()
    console.log(this.$route.params)
  },
  mounted () {
    // this.qrcode()
  },
  methods: {
    back () {
      window.history.go(-1)
    },
    getMe () {
      api.myIndex().then(res => {
        this.my = res.data
      })
    },
    clickGeneratePicture () {
      const _this = this
      setTimeout(() => {

        const opts = {
          // y: window.scrollY,
          backgroundColor: 'transparent',
          useCORS: true, // 允许跨域
          // allowTaint: true
        };
        html2canvas(this.$refs.addImage, opts).then(canvas => {
          let dataURL = canvas.toDataURL("image/png");
          this.dataURL = dataURL;
          if (this.dataURL !== "") {
            // this.dialogTableVisible = true;
          }
        });
        this.$toast('海报已生成')
      }, 1000)
    },
    //    qrcode() {
    // 	   // console.log(this.ShareCode)
    // 	   var code=this.ShareCode.toString()

    //     },
    getData () {
      api.packageDeatail({
        data: {
          id: this.$route.params.id,
        }
      }).then(res => {
        var detail = res.data
        this.detail = detail
        console.log('detail', this.detail)
        // this.getserve()

      })
      api.getShareQR({}).then(res => {
        // this.ewm=res.data.QRUrl
        this.ShareCode = res.data.ShareCode
        console.log(this.ShareCode)
        var code = this.$route.params.url + '?share=' + this.ShareCode
        QRCode.toDataURL(code.toString())
          .then(url => {
            console.log(url)
            this.ewm = url
          })
          .catch(err => {
            console.error(err)
          })

      })


    },
    // getserve () {
    // 	// console.log('id',this.$route.params.id)
    //   api.projectList({
    //     data: {
    //       id: this.$route.params.id,
    //     }
    //   }).then(res => {

    //     this.projectList = res.data
    //     this.level = this.projectList
    // 	this.projectList.forEach(v => {
    // 	  v.text = v.serviceName
    // 	})
    // 	for(let i=0 ;i<this.projectList.length;i++){
    // 		if()
    // 	}
    //     this.detail = Object.assign({}, this.detail, this.projectList[0])
    // 	console.log('服务',this.detail)
    //   })
    // },
  }
}
</script>

<style lang="scss">
.button {
  width: 85%;
  height: 0.9rem;
  background: linear-gradient(
    96deg,
    rgba(72, 143, 240, 1),
    rgba(51, 130, 239, 1)
  );
  border-radius: 0.15rem;
  font-size: 0.35rem;
  line-height: 0.9rem;
  text-align: center;
  margin: 0 auto;
  color: #fefefe;
  margin-top: 0.8rem;
}

#pic {
  width: 6.5rem;
  height: 7.5rem;
  -moz-box-shadow: 2px 2px 5px #cccccc;
  -webkit-box-shadow: 2px 2px 5px #cccccc;
  box-shadow: 2px 2px 5px #cccccc;
  margin: 0 auto;
  border-radius: 0.2rem;
  margin-top: 1rem;
  overflow: hidden;
	background: white;
  #imgbox {
    height: 4rem;
  }

  #text {
    height: 15vh;
    background: white;

    .goodName {
      color: #111111;
      font-size: 0.35rem;
      float: left;
      padding: 0.2rem 0 0 0.4rem;
    }

    .money {
      color: #ff344c;
      font-size: 0.35rem;
      float: right;
      padding: 0.2rem 0.4rem 0 0;
    }

    .name {
      font-size: 0.28rem;
      color: #111111;
      clear: both;
      display: inline-block;
      float: right;
    padding-right: 0.5rem;
    margin-top: -0.5rem;
    }

    .tximg {
      // clear: both;
      display: inline-block;
      float: right;
      margin-right: 0.3rem;
      margin-top: 0.2rem;
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 50%;
    }
.wxgzh {
		font-size: 0.25rem;
		color: #777777;
		float: left;
		padding-left: 0.4rem;
		padding-top: 0.4rem;
	}
    .ewm {
      width: 1.8rem;
      height: 1.8rem;
      clear: both;
      display: inline-block;
      float: left;
      margin: 0 0 0 0.28rem;
    }
  }

  .img {
    width: 100%;
    height: 100%;
  }
}

.tips {
  color: #999999;
  font-size: 0.32rem;
  margin-top: 0.5rem;
}
</style>
